<template>
  <div>
    <a-modal v-model="visible" :footer="null" :closable="false" dialogClass="loginModal" width="700px">
      <h4 class="titleH4">残疾人认证</h4>
      <div class="formData">
        <a-row>
          <a-col :span="16" class="item">
            <div class="label">身份证</div>
            <div class="content">
              <div style="display:inline-block;width:140px;margin-right:20px;">
                <a-upload
                  :disabled="!!userInfo"
                  name="filecontent"
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  action="/api/upload/img"
                  :before-upload="beforeUpload"
                  @change="handleChange($event,'positiveimg')"
                >
                  <img style="width:120px;height:102px;" v-if="positiveimg" :src="imageWebUrl+positiveimg" alt="avatar" />
                  <div v-else>
                    <img style="width:120px;" src="@/assets/image/imageIdNumber.png" alt="image">
                  </div>
                </a-upload>
                <p style="text-align: center;font-size: 12px;color: #999;">身份证正面</p>
              </div>
              <div style="display:inline-block;width:140px;">
                <a-upload
                  :disabled="!!userInfo"
                  name="filecontent"
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  action="/api/upload/img"
                  :before-upload="beforeUpload"
                  @change="handleChange($event,'otherSideimg')"
                >
                  <img style="width:120px;height:102px;" v-if="otherSideimg" :src="imageWebUrl+otherSideimg" alt="avatar" />
                  <div v-else>
                    <img style="width:120px;" src="@/assets/image/imageIdNumber.png" alt="image">
                  </div>
                </a-upload>
                <p style="text-align: center;font-size: 12px;color: #999;">身份证反面</p>
              </div>
            </div>
          </a-col>
          <a-col :span="8" class="item">
            <div class="label">残疾证</div>
            <div class="content">
              <a-upload
                name="filecontent"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="/api/upload/img"
                :before-upload="beforeUpload"
                @change="handleChange($event,'Disabilityimg')"
              >
                <img style="width:120px;height:102px;" v-if="Disabilityimg" :src="imageWebUrl+Disabilityimg" alt="avatar" />
                <div v-else>
                  <img style="width:120px;" src="@/assets/image/imageIdNumber.png" alt="image">
                </div>
              </a-upload>
              <p style="text-align: center;font-size: 12px;color: #999;width: 140px;">残疾证书</p>
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="11" class="item">
            <div class="label">姓名</div>
            <div class="content">
              <a-input :disabled="!!userInfo" size="large" v-model="name" placeholder="请输入姓名" />
            </div>
          </a-col>
          <a-col :span="11" class="item" :offset="2">
            <div class="label">身份证号</div>
            <div class="content">
              <a-input :disabled="!!userInfo" size="large" v-model="idCode" placeholder="请输入身份证号" />
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="11" class="item">
            <div class="label">残疾证号</div>
            <div class="content">
              <a-input size="large" v-model="Disabilitycode" placeholder="请输入残疾证号" />
            </div>
          </a-col>
          <a-col :span="11" class="item" :offset="2">
            <div class="label">残疾类别/等级</div>
            <div class="content">
              <a-cascader
                :options="listTree"
                placeholder="残疾类别/等级"
                @change="onChange"
                :fieldNames='fieldNames'
              />
            </div>
          </a-col>
        </a-row>
        <a-row class="item">
          <div class="label">备注（选填）</div>
          <div class="content">
            <a-textarea size="large" v-model="disaAuthDesc" :maxLength="200" placeholder="简单描述您目前的身体状况（200字以内）" />
          </div>
        </a-row>
        <a-row>
          <a-col :span="24" class="item">
            <div class="content">
              <p style="font-size:13px;line-height:18px;color:#999999;padding:24px 0 0;">
                <span style="font-weight:bold;color:#CA0000;">注</span>：您提交的残疾人身份认证信息将会在中国残疾人联合会信息中心进行信息匹配。 信息匹配无误，则认证通过。
              </p>
            </div>
          </a-col>
        </a-row>
      </div>
      <!-- 操作 -->
      <div class="operation">
        <a-button size="large" style="margin-right:50px;" @click="visible = false">取消</a-button>
        <a-button size="large" type="primary" @click="authentic">认证</a-button>
      </div>
      <p class="func">未持有残疾人证，无法认证？<span @click="changeVisible">点击这里，人工审核</span></p>
    </a-modal>
    <a-modal
      :closable="false"
      style="width:550px;"
      dialogClass="success"
      :maskClosable="false"
      :visible="successvisible"
    >
      <template #footer>
        <a-button size="large" type="primary" @click="successOk">我知道了</a-button>
      </template>
      <template #title>
        <a-icon style="color:#FFBE37;" type="info-circle" />
        <span style="display:inline-block;margin-left:10px;color:#333333;">提示信息</span>
      </template>
      <div class="successModel">
        <span>您已完成身份认证，平台为您提供全方位的生活与工作需要：</span>
        <p>1. 提供一站式线上教育、培训、就业</p>
        <p>2. 生动解读法律法规</p>
        <p>3. 提供优质特惠商品</p>
        <p>4. 广泛开展文旅活动</p>
        <p>5. 绘制残疾人康复服务地图</p>
        <p>享受专有待遇权益，快去看看吧~</p>
      </div>
      
    </a-modal>
    <a-modal
      :closable="false"
      style="width:550px;"
      dialogClass="success"
      :maskClosable="false"
      :visible="errorvisible"
    >
      <template #footer>
        <a-button size="large" type="primary" @click="errorOk">我知道了</a-button>
      </template>
      <template #title>
        <a-icon style="color:#FFBE37;" type="info-circle" />
        <span style="display:inline-block;margin-left:10px;color:#333333;">提示信息</span>
      </template>
      <div class="successModel">
        <span>{{errorMessage}}</span>
      </div>
    </a-modal>
    <Undocumentedcertification @closeflag="clearflag" ref="Undocumentedcertification"/>
  </div>
  

</template>

<script>
function isIdCard(idCard) {
	// 15位和18位身份证号码的正则表达式
	var regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;

	// 如果通过该验证，说明身份证格式正确，但准确性还需计算
	if (regIdCard.test(idCard)) {
		if (idCard.length == 18) {
			var idCardWi = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10,
					5, 8, 4, 2); // 将前17位加权因子保存在数组里
			var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); // 这是除以11后，可能产生的11位余数、验证码，也保存成数组
			var idCardWiSum = 0; // 用来保存前17位各自乖以加权因子后的总和
			for (var i = 0; i < 17; i++) {
				idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
			}

			var idCardMod = idCardWiSum % 11;// 计算出校验码所在数组的位置
			var idCardLast = idCard.substring(17);// 得到最后一位身份证号码

			// 如果等于2，则说明校验码是10，身份证号码最后一位应该是X
			if (idCardMod == 2) {
				if (idCardLast == "X" || idCardLast == "x") {
					//alert("恭喜通过验证啦！");
					return true;
				} else {
					//alert("身份证号码错误！");
					return false;
				}
			} else {
				// 用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
				if (idCardLast == idCardY[idCardMod]) {
					//alert("恭喜通过验证啦！");
					return true;
				} else {
					//alert("身份证号码错误！");
					return false;
				}
			}
		}else{
			return true;
		}
	} else {
		//alert("身份证格式不正确!");
		return false;
	}
}
import Undocumentedcertification from './Undocumentedcertification.vue'
export default {
  components:{ Undocumentedcertification },
  data(){
    return{
      userInfo:null,
      visible: false,
      // 认证成功弹框
      successvisible:false,
      // 认证失败弹框
      errorvisible:false,
      // 级联选择字段修改
      fieldNames:{
        label: 'name', 
        value: 'code', 
        children: 'children'
      },
      listTree:[], //残疾类别、等级  二级数组
      Disabilityimg:"", //残疾证照片
      positiveimg:"", // 身份证正面
      otherSideimg:"", // 身份证反面
      name:"", //姓名
      idCode:"", //身份证号
      Disabilitycode:"", //残疾证号
      disaType:"", //残疾类别
      disaLevel:"", //残疾等级
      disaAuthDesc:"", // 残疾说明
      errorMessage:"", // 错误提示信息
    }
  },
  watch:{
    userInfo(newVal){
      this.userInfo = newVal;
      // 身份证图片赋值
      for(let i=0;i<this.userInfo.imageList.length;i++){
        if(this.userInfo.imageList[i].imgSubType == 1){
          this.positiveimg = this.userInfo.imageList[i].imgPath;
        }else if(this.userInfo.imageList[i].imgSubType == 2){
          this.otherSideimg = this.userInfo.imageList[i].imgPath;
        }
      }
      // 姓名
      this.name = this.userInfo.name;
      // 身份证号
      this.idCode = this.userInfo.idNo;
    },
  },
  methods:{
    errorOk(){
      this.errorvisible = false;
    },
    onChange(e){
      this.disaType = e[0];
      this.disaLevel = e[1];
    },
    // 未持有残疾人证
    changeVisible(){
      this.visible = false;
      this.$refs['Undocumentedcertification'].userInfo = this.userInfo;
      this.$refs['Undocumentedcertification'].visible = true;
    },
    // 获取残疾类别、等级数组
    getlistTree(){
      this.$ajax({
        url:"/news/code/list/disab/tree",
        method:"post"
      }).then((res)=>{
        if(res.code == 200){
          this.listTree = res.data;
        }
      })
    },
    // 图片上传
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("请上传png、jpeg、jpg格式的头像!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传的图片最大为2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    handleChange(info,e) {
      if(info.file.status == 'done' && info.fileList && info.fileList[info.fileList.length-1].response.code == 200){
        this[e] = info.fileList[info.fileList.length-1].response.data;
      }else if(info.file.status == 'done' && info.fileList && info.fileList[info.fileList.length-1].response.code != 200){
        this.$message.error(info.fileList[info.fileList.length-1].response.msg)
      }
    },
    clearflag(){
      this.$emit('getUserInfo');
      this.$emit('clearflag');
    },
    successOk(e) {
      if(this.$route.fullPath == "/personalCenter/information"){
        this.$emit('getUserInfo')
        this.$emit('clearflag')
        this.visible = false;
      }else{
        this.$router.push("/personalCenter/information")
        this.visible = false;
      }
        this.successvisible = false;
    },
    // 残疾人认证
    authentic(){
      if(!this.name){
        this.$message.error('请输入姓名')
      }else if(!this.idCode){
        this.$message.error('请输入身份证号')
      }else if(!isIdCard(this.idCode)){
        this.$message.error('请输入正确的身份证号')
      }else if(!this.Disabilitycode){
        this.$message.error('请输入残疾证号')
      }else if(!/[\d]{17}[\dX][1-7][1-4]/.test(this.Disabilitycode)){
        this.$message.error('请输入正确的残疾证号')
      }else if(!this.disaType){
        this.$message.error('请选择残疾类别')
      }else if(!this.disaLevel){
        this.$message.error('请选择残疾等级')
      }else if(!this.positiveimg){
        this.$message.error('请上传身份证正面照片')
      }else if(!this.otherSideimg){
        this.$message.error('请上传身份证反面照片')
      }else{
        let userImageJson = [];
        // 身份证正面
        userImageJson.push({
          imgPath:this.positiveimg,
          imgSubType:1,
          imgType:1
        })
        // 身份证反面
        userImageJson.push({
          imgPath:this.otherSideimg,
          imgSubType:2,
          imgType:1
        })
        // 残疾证
        userImageJson.push({
          imgPath:this.Disabilityimg,
          imgType:3
        })
        this.$ajax({
          url:"/user/userinfo/user/authentic",
          method:"post",
          params:{
            name:this.name,
            idNo:this.idCode,
            disaAuthFlag:"Y",
            voluntAuthFlag:"N",
            disaAuthDesc:this.disaAuthDesc,
            disaNo:this.Disabilitycode,
            disaType:this.disaType,
            disaLevel:this.disaLevel,
            userImageJson:JSON.stringify(userImageJson)
          }
        }).then((res)=>{
          if(res.code == 200){
            this.$store.commit('changeroleType',2);
            this.successvisible = true;
          }else{
            this.errorMessage = res.msg;
            this.errorvisible = true;
          }
        })
      }
    },
  },
  created(){
    this.getlistTree();
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-cascader-picker{
  width: 100%!important;
  height: 40px!important;
  .ant-input{
    height: 40px;
  }
}
/deep/.success{
  width: 550px!important;
  .ant-modal-header{
    border-bottom:0!important;
  }
  .ant-modal-footer{
    border-top:0!important;
  }
}
.successModel{
  padding-left: 20px;
  span{
    display: block;
    color: #333333;
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 8px;
  }
  p{
    color: #333333;
    font-size: 16px;
    line-height: 27px;
  }
}
/deep/.loginModal{
  .ant-modal-body{
    padding: 38px !important;
    padding-bottom: 48px !important;
  }
  .titleH4{
    font-size: 20px;
    line-height: 28px;
    text-align: center;
  }
  .item{
    .label{
      padding-top: 24px;
      padding-bottom: 16px;
      &::after{
        content: '：';
      }
    }
  }
  .operation{
    text-align: center;
    margin-top: 48px;
    button{
      width: 110px;
    }
  }
  .func{
    font-size: 18px;
    color: #333333;
    line-height: 25px;
    text-align: center;
    margin-top: 24px;
    span{
      color: #FFBE37;
      cursor: pointer;
    }
  }
}
</style>
